<template>
    <div class="menu">
      <el-row>
        <el-col>
          <el-menu
            active-text-color="#67C23A"
            background-color="#ffffff"
            default-active="1"
            text-color="#333"
            @open="handleOpen"
            @close="handleClose"
            >
            <el-menu-item index="1" @click="clickHandle(1)">
              <el-icon><Histogram /></el-icon>
              <span>市场环境</span>
            </el-menu-item>
            <el-menu-item index="2" @click="clickHandle(2)">
              <el-icon><Grid /></el-icon>
              <span>情绪周期</span>
            </el-menu-item>
            <el-menu-item index="3" @click="clickHandle(3)">
              <el-icon><Platform /></el-icon>
              <span>涨跌分析</span>
            </el-menu-item>
            <el-menu-item index="4" @click="clickHandle(4)">
              <el-icon><Menu /></el-icon>
              <span>待定</span>
            </el-menu-item>
            <el-menu-item index="5" @click="clickHandle(5)">
              <el-icon><TrendCharts /></el-icon>
              <span>待定</span>
            </el-menu-item>
            <el-menu-item index="6" @click="clickHandle(6)">
              <el-icon><Flag /></el-icon>
              <span>待定</span>
            </el-menu-item>
            <el-menu-item index="7" @click="clickHandle(7)">
              <el-icon><Platform /></el-icon>
              <span>待定</span>
            </el-menu-item>
                  
          </el-menu>
        </el-col>
      </el-row>

      <el-select
        v-model="value"
        placeholder="Select"
        size="large"
        class="select"
        @change="handleChange">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
</template>

<script >

export default {
  props: {
      onEvent: Function,
      selectCodeEvent:Function
  },  
  data() {
    return {
      value: '选择股票',
      options : [
        {
          value: '600733 北汽蓝谷',
          label: '北汽蓝谷',
        },
        {
          value: '600590 长安汽车',
          label: '长安汽车',
        },
        {
          value: '300890 塞力斯',
          label: '塞力斯',
        },
        {
          value: '600529 江淮汽车',
          label: '江淮汽车',
        },
        {
          value: '000550 江铃汽车',
          label: '江铃汽车',
        },
        {
          value: '600539 智能网联汽车ETF',
          label: '智能网联汽车ETF',
        },
        {
          value: '600107 美尔雅',
          label: '美尔雅',
        },
        {
          value: '300641 正丹股份',
          label: '正丹股份',
        },
      ]

    };
  },
  methods: {
    clickHandle(value) {
        console.log(value);
        this.onEvent(value)
    },
    handleChange(value) {
      this.selectCodeEvent(value)
      console.log(value);
      console.log(value);
    }
  },
};
</script>

<style scoped>
.menu {
    flex: 10; /* 默认为1, 这里需要设置为0.1以表示10% */
  }
  .select{
    margin-top: 20px;
    margin-left:10%;
    margin-right: 10%;
    width:80%;
  }
</style>
